<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { ElMessage,  ElUpload,type UploadFile,UploadRawFile,UploadProps, UploadFiles} from 'element-plus'
import type { AxiosResponse } from 'axios';
const emit = defineEmits() 

const uploadRef = ref(null);
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const props = defineProps({
  filesUrl:{
    type:Object,
    require:false
  },
  showConfirm:{
    type:Boolean,
    require:true
  }
})

// 用于存储上传的文件列表
const fileLsit = ref([])
//移除新被选中的图片
const onRemove = (file: UploadFile) => {
  //移除视图中的图片
  fileLsit.value.forEach((item,index)=>{
    if(file.uid === item.uid){
      fileLsit.value.splice(index,1)
      emit('removeImg',item.uid)
    }
  })
}
 
//图片预览
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

//图片列表改变
const onChange = (file:UploadFile,)=>{
  let imgSize = Number(file.size /1024 /1024)
  if(imgSize > 5){
    ElMessage.warning('图片不能超过5MB')
    onRemove(file)
    return
  }
  fileLsit.value.push(file.raw)
  emit('onUpload',fileLsit.value)
} 

//超出范围限制
const onExceed = ()=>{
  ElMessage.warning('最多上传9张照片')
}
//删除旧的图片
const onDelImg = (id:Number)=>{
  emit('delImg',id)
}
//确认更新
const confirm = ()=>{
  emit('onUpdate')
  fileLsit.value = []
}
</script>

<template>
  <el-form class="el-form">
    <el-form-item class="el-form-item">
      <!-- 修改帖子时可能存在的图片 -->
      <div class="images">
        <div class="img-box" v-for="(img,index) in filesUrl" :key="index">
          <el-icon
          class="icon"
          @click="onDelImg(img.id)"
          ><CircleClose /></el-icon>
          <img 
          class="img"
          :src="img.imageUrl">
        </div>
      </div>

      <!-- 新上传的图片 -->
      <el-upload
      action="#"
      v-model:file-list="fileLsit"
      drag
      multiple
      list-type="picture-card" 
      :limit="9"
      :on-remove="onRemove"
      :on-exceed="onExceed"
      :on-change="onChange"
      :auto-upload="false">
        <el-icon><Plus /></el-icon>
        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <el-icon><zoom-in /></el-icon>
              </span>

              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="onRemove(file)"
              >
                <el-icon><Delete /></el-icon>
              </span>
            </span>
          </div>      
        </template>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button
        v-show="showConfirm" 
        type="primary"
        @click="confirm">确认</el-button>
      </el-form-item>
  </el-form>
      
</template>

<style lang="scss" scoped>
.el-form{
  .el-form-item{
    .images{
      .img-box{
        .icon{

        }
        .img{
        width: 150px;
        height: 150px;
      }
      }
      
    }
  }
}
</style>
  